<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <hr />
    <button @click="gotoMovie2">跳转到电影2</button>
    <button @click="gotoMovie3">跳转到电影3通过replace</button>
    <button @click="goback">后退</button>

    <router-link to="/main">访问后台主页</router-link>

  </div>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    gotoMovie2() {
      // 通过编程式API，导航跳到指定的页面
      // this.$router.push()跳转到指定界面，并且增加一条记录
      // this.$router.replace() 跳转到指定界面,替代之前的界面
      this.$router.push('/movie/2')
    },
    gotoMovie3() {
      this.$router.replace('/movie/3')
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  min-height: 200px;
  background-color: pink;
  padding: 15px;
}
</style>
